import {Component} from 'angular2/core';
import {Router, RouteParams} from 'angular2/router';
import {HeroService, Hero} from './hero.service';

@Component({
  template: `
    <h2>HEROES</h2>
    <ul>
      <li *ngFor="#hero of heroes"
        [class.selected]="isSelected(hero)"
        (click)="onSelect(hero)">
        <span class="badge">{{hero.id}}</span> {{hero.name}}
      </li>
    </ul>
  `
})
export class HeroListComponent { 
  heroes: Hero[];
  private _selectedId: number;
  constructor(
        private _router: Router,
        private _service: HeroService,
        routeParams: RouteParams) {
    console.log('----HeroListComponent initial');
    this._selectedId = +routeParams.get('id');
  }
  
  ngOnInit() {
    this._service.getHeroes().then(heroes => this.heroes = heroes)
  }
  
  isSelected(hero: Hero) { return hero.id === this._selectedId; }
  
  onSelect(hero: Hero) {
    this._router.navigate( ['HeroDetail', { id: hero.id }] );
  }
}
